<template>
	<view class="buy template-details tn-safe-area-inset-bottom">

		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>


		<view class="title">
			<text class="text">￥余额：</text>
			<text class="num">{{wallet.yuE}}</text>
		</view>
		<view class="number">
			<view class="list">
				<view :class="num == index ? 'item real' : 'item'" v-for="(item, index) in list" :key="index"
					@click="pick(index)">
					<view class="card">
						<view class="top" v-if="index  !== 7">
							<text>￥{{ item.number }}</text>
						</view>

						<view class="top" v-if="index  === 7">
							<tn-input placeholder="请输入金额(￥)" name="input" v-model="payModel.price"
								inputAlign="center"></tn-input>
						</view>
					</view>
					<view v-if="index === 7" class="recommend">
						<text>自定义金额</text>
					</view>
				</view>
			</view>
			<view class="sure" @click="pay()">
				<text>确定充值</text>
			</view>
		</view>
		<view class="tip">
			<text class="titl">温馨提示</text>
			<view>
				<text>1、充值即代表已阅读并同意</text>
				<text @click="readWord">《充值服务》；</text>
			</view>
			<view>
				<text>2、请在网络状态良好的情况下进行充值，为了保证充值顺利，请耐心等待充值，不要进行其他操作；</text>
			</view>
			<view>
				<text>3、前往账单记录，可查询充值订单详情和消费详情；</text>
			</view>
			<view>
				<text>4、在支付过程中遇到任何问题，请联系官方客服；</text>
				<!--  <text>小助手</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../common/request';
	export default {
		data() {
			return {
				num: 0,
				list: [{
						number: '10',
					},
					{
						number: '50',
					},
					{
						number: '100',
					},
					{
						number: '200',
					},
					{
						number: '300',
					},
					{
						number: '500',
					},
					{
						number: '1000',
					},
					{

					},
				],
				payModel: {
					type: "",
					price: 0,
					desc: "",
					orderId: "",
					openId: ""
				},
				wallet:{},
				orderInfo:'',
				goodsInfo:''

			};
		},
		created() {},
		onLoad: function(option) {
			console.log(option)
			this.orderInfo = option.info
			this.goodsInfo = JSON.parse(decodeURIComponent(option.goods))
		},
		mounted() {
			this.loadData()
		},
		methods: {
			loadData() {
				let user = uni.getStorageSync("userinfo");
				//加载钱包信息
				request.get("/xxc/wallet/info/" + user.userId).then((res) => {
					this.wallet = res.data;
				});
			},
			goBack() {
				// 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
				const pages = getCurrentPages()
				if(JSON.stringify(this.orderInfo) !== undefined ){
					if(JSON.stringify(this.orderInfo) !== '{}'){
						uni.navigateTo({
							url: '/orderPages/editOrder?info='+ JSON.stringify(this.orderInfo)
						})
					}
				}
				if(JSON.stringify(this.goodsInfo) !== undefined ){
					if(JSON.stringify(this.goodsInfo) !== '{}'){
						uni.navigateTo({
								url: "/discoveryPages/product?info=" + encodeURIComponent(JSON.stringify(this.goodsInfo)),
						});
					}
				}
				
				if (pages && pages.length > 0) {
					const firstPage = pages[0]
					if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index')) {
						uni.reLaunch({
							url: '/pages/index'
						})
					} else {
						uni.navigateBack({
							delta: 1
						})
					}
				} else {
					uni.reLaunch({
						url: '/pages/index'
					})
				}
			},

			// 充值界面
			pay() {

				let price = this.payModel.price;
				let orderId = this.createordernum();
				let user = uni.getStorageSync("userinfo");
				this.payModel.type = "jsapi"
				this.payModel.desc = "千千互娱-充值"
				this.payModel.orderId = orderId;
				this.payModel.openId = user.openId
				let orderTemp = this.orderInfo;
				request.get("/test/transactions", this.payModel).then((payRes) => {
					uni.requestPayment({
						provider: "wxpay",
						appid: payRes.signMap.appId,
						timeStamp: payRes.signMap.timeStamp,
						package: payRes.signMap.package,
						paySign: payRes.signMap.paySign,
						sign: payRes.signMap.paySign,
						signType: payRes.signMap.signType,
						nonceStr: payRes.signMap.nonceStr,
						success: function(res) {
							let model = {
								id: orderId,
								userId: "",
								money: 0.00,
								type: "1",
								state: "1"
							}
							model.userId = user.userId;
							model.money = price;
							request.post("/xxc/walletInfo", model).then((walletInfo) => {
								uni.showModal({
									title: '提示',
									content: '充值成功！',
									success: function(res) {
										if (res.confirm) {
											if(JSON.stringify(orderTemp) !== '{}'){
												uni.navigateTo({
													url: '/orderPages/editOrder?info='+ JSON.stringify(orderTemp)
												})
											}else{
												uni.reLaunch({
													url: '/pages/index'
												})
											}
										} else if (res.cancel) {
											console.log('取消');
										}
									}
								});
							});
						},
						fail: function(err) {
							console.log('支付失败:' + JSON.stringify(err));
						}
					})
				});
			},
			//切换改变金额
			pick(index) {
				this.payModel.price = this.list[index].number;
				this.num = index;

			},
			//随机生成订单编号
			createordernum() {
				const now = new Date()
				let month = now.getMonth() + 1
				let day = now.getDate()
				let hour = now.getHours()
				let minutes = now.getMinutes()
				let seconds = now.getSeconds()
				month = this.setTimeDateFmt(month)
				day = this.setTimeDateFmt(day)
				hour = this.setTimeDateFmt(hour)
				minutes = this.setTimeDateFmt(minutes)
				seconds = this.setTimeDateFmt(seconds)
				let orderCode = now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds + (Math
					.round(Math.random() * 1000000)).toString();
				return orderCode;
				//基于年月日时分秒+随机数生成订单编号
			},
			setTimeDateFmt(s) { // 个位数补齐十位数
				return s < 10 ? '0' + s : s;
			},
			readWord(){
			
				uni.reLaunch({
					url: '/minePages/trade'
				})

			}

		},
	};
</script>

<style lang="scss" scoped>
	.buy {
		width: 100%;
		height: 100%;

		.title {
			display: flex;
			align-items: center;
			padding: 150rpx 0 20rpx 50rpx;
			background-color: #ffffff;

			>image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 6rpx;
			}

			>text {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}

			.num {
				color: #ff4141;
			}
		}

		.number {
			width: 100%;
			height: 940rpx;
			background-color: #ffffff;
			margin-top: 18rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 38rpx 40rpx 66rpx 40rpx;

				.item {
					width: 194rpx;
					height: 194rpx;
					background: #ffffff;
					box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
					border-radius: 20rpx;
					margin-bottom: 44rpx;
					display: flex;

					.card {
						width: 194rpx;
						height: 194rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.top {
							display: flex;
							align-items: center;

							>text {
								font-size: 32rpx;
								font-family: PingFangSC-Semibold, PingFang SC;
								font-weight: 600;
								color: #666666;
								line-height: 44rpx;
								margin-right: 12rpx;
							}

							>image {
								width: 30rpx;
								height: 30rpx;
							}
						}

						.money {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 34rpx;
							margin-top: 12rpx;
						}
					}

					.recommend {
						width: 112rpx;
						height: 36rpx;
						background: #f3f2ea;
						border-radius: 8rpx 0rpx 8rpx 0rpx;
						position: absolute;
						text-align: center;
						margin-top: -18rpx;

						>text {
							font-size: 20rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #666666;
							line-height: 36rpx;
						}
					}
				}

				.real {
					border: 2rpx solid #f88700;
				}

				&:after {
					content: '';
					width: 194rpx;
				}
			}

			.sure {
				width: 582rpx;
				height: 80rpx;
				background: #ff6a5f;
				border-radius: 40rpx;
				text-align: center;

				>text {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #ffffff;
					line-height: 80rpx;
				}
			}
		}

		.tip {
			height: 394rpx;
			background: #ffffff;
			margin-top: 18rpx;
			padding: 40rpx;

			.titl {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #666666;
				line-height: 40rpx;
				margin-bottom: 6rpx;
			}

			>view {
				>text {
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: #999999;
					line-height: 32rpx;
				}

				&:nth-child(2) {
					>text:nth-child(2) {
						color: #333333;
					}
				}

				&:nth-child(5) {
					>text:nth-child(2) {
						color: #ff6a5f;
						font-weight: 600;
						border-bottom: 2rpx solid #ff6a5f;
					}
				}
			}
		}
	}
</style>